<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用背景图片重复的完成背景的技巧</title>

    <style>
      /* 
        对于颜色分布不均的背景颜色，可以截取一个像素宽度的效果然后横向重复来填充即可
       */
       .box{
           width: 1000px;
           height: 32px;
           margin: 20px auto;
           border-radius: 10px;
           background-image: url(./img/bg.png);
           background-repeat: repeat-x;
       }

    </style>
</head>
<body>
    <div class="box">

    </div>
</body>
</html>